<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.22 (466990)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2018-01-15 16:38:05 +0000"/><meta name="source" content="desktop.mac"/><meta name="source-url" content="https://segmentfault.com/a/1190000014167121"/><meta name="updated" content="2022-05-27 17:45:40 +0000"/><title>DAY34：Sass和模块化开发</title></head><body><div><span style="font-size: 18px; font-family: &quot;Courier New&quot;; font-weight: bold;">一、sass介绍</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    sass是一种高效css编译模式，目前这种高效的css编译方式有：sass、less、stylus等</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    sass基于ruby语言，支持</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">两种后缀名文件：一种后缀名为sass，不使用大括号和分号</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    本节课所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件。</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    sass是需要编</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">译的，sass不能</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">直接用于页面。它可以极大地</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: &quot;Courier New&quot;;">提高编程效率</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">（对于使用熟练的人来说）。</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    sass想要应用在项目中需要编译成css文件</span></div><div><br/></div></div><div><span style="font-size: 18px;"><span style="font-size: 18px;"><span style="font-size: 18px;"><br/></span></span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;; font-weight: bold;">二、sass的编译</span></span></span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    1. 使用编辑器插件编译</span></span></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        以VSCode举例，在插件库中搜索 “</span></span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">Live Sass Compiler</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">” ，并安装，成功后重启编辑器。</span></span></font></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        开启Sass编译：在底部状态栏，点击 “Watch Sass” </span></span></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: &quot;Courier New&quot;;">        关闭Sass编译：在底部状态栏，点击 “Watching…”</span></span></div><div><br/></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    2. 其他编译方式请参考官方文档</span></span></font></div><div><font face="Courier New" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;"><span>    <span>    </span></span></span></span></font><span style="font-family: &quot;Courier New&quot;;"><a href="https://www.sass.hk/install/">https://www.sass.hk/install/</a></span></div></div><div><span style="font-size: 18px; orphans: 2; widows: 2; font-family: &quot;Courier New&quot;; font-weight: bold;"><br/></span></div><div><span style="font-size: 18px; orphans: 2; widows: 2; font-family: &quot;Courier New&quot;; font-weight: bold;">三、sass语法</span></div><div style="margin: 0px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;">变量</span></span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    以$开头</span></span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">    $font-size</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;;">16</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">px;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">    div</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">{</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Courier New&quot;;">        font-size</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">: </span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">$font-size</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    }</span></span></div></div></div><div style="margin: 0px; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">复杂变量的使用</span></span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 14px;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;"><span>    </span>后面加上 !default 表示当前变量默认值</span></div><div><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    </span><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$linkColor</span><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">:#b6b6b6 #ddd</span><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">!default</span><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">;</span></div></div><div style="font-size: 14px;"><div><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    div</span><span style="background-color: rgb(250, 250, 250); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">{</span></div></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        color</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">: </span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">nth</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">(</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$linkColor</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">,</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">1</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">);</span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        &amp;:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(153, 153, 255); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">hover</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">{</span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">            color</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(153, 153, 255); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">nth</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">(</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$linkColor</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">,</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">2</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">);</span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        }</span></span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div style="font-size: 14px;"><div><span style="background-color: rgb(250, 250, 250); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    </span></span></div></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    nth()方法，</span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;"><span>    </span>参数1：复杂变量</span></div><div style="font-size: 14px;"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;"><span>    </span>参数2：索引</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">，从1开始</span></div><div style="font-size: 14px;"/><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    一般我们都将变量当做属性值来使用，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">但是也有极特殊情况下我们会将变量当做选择器</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">使用</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    这时候，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">我们必须以</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">#{$name}</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">的方式来使用变量名；</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    $name</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">:top !default;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .class-#{</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$name</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">}{</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        border-#{name}:1px solid #b6b6b6;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;">多值变量：map 和 list(复杂变量)</span></span></div></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    多值变量代表的是多维数据的存储方式，换句话说，list相当于js中的数组map相当于js中的对象。 list数据一般用空格分割， 但是也可以用 逗号 或者小括号分割多个值。 </span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    list:</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        $list:(20px 40px)(30px 20px)(40px 30px);//相当于多维数组，其他格式同理；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        $list:20px 30px 40px 50px 60px;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        $list:20px,30px,40px,50px,60px;</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        使用：</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">对于list的使用，可以使用 nth($list,num)去调用；</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        当然我们还可以去使用其他方式；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            length($list)                        返回list的长度</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            nth($list, $n)                       返回索引的项目</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            set-nth($list, $n, $value)           设置list中第n个的值</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            join($list1, $list2, [$separator])   将两个列表链接在一起</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            append($list1, $val, [$separator])   追加一个值到列表最后</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            zip($lists…)                         将几个列表组合成多维列表</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            index($list, $value)                 返回一个列表中值的位置</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">       </span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">$list:(top 20px 30px) (left 40px 50px) (right 60px 70px);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">        @each $name,$width,$height in $list{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">            .box-#{$name}{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">                width:$width;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">                height:$height;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">            }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">        }</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    map:</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        map的数据是以键值对形式出现的，期中value可以是list。格式为</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            $map:(key1:value1, key2:value2, key3:value3)。</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        最常用的取值方法就是用map-get($map,$key) 进行取值</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        关于map还有很多函数：</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-get($map, $key)           返回key值；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-merge($map1, $map2)       合并两个$map；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-remove($map, $keys…)      删除某个value并返回value值；</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-keys($map)                以list形式返回所有$map 的key;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-values($map)              以list形式返回所有$map中的value;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            map-has-key($map, $key)       查看当前的$map是否有这个key</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">            keywords($args)               返回一个关键字</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">$headers:(h1:20px,h2:30px,h3:40px);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">        @each $key, $value in $headers{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">            #{$key}{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">                font-size: $value;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">            }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(170, 121, 66); font-family: &quot;Courier New&quot;;">        }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        这里的each用法那和我们js中的for-in用法基本一致，只不过写法不同。</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        $key 相当于for-in中的变量，$value 相当于for-in中的obj[i]；</span></span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;">嵌套</span></span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; widows: 1; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    sass可以进行选择器的嵌套，表示层级关系</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    选择器嵌套：</span></span></div><div style="background-color: rgb(250, 250, 250);"><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">    ul</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">{</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">        li</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">{</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Courier New&quot;;">            list-style</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">: none;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">            color</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(153, 153, 255); font-family: &quot;Courier New&quot;;">nth</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">(</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Courier New&quot;;">$linkColor</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">, </span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;;">1</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">);</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        }</span></span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;"><span>    </span>在选择器嵌套中，可以使用“&amp;”找到父选器</span></span></div><div><br/></div></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    属性嵌套：</span></span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    .</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">class</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">{</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">        border</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:{</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">            style</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">solid</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">            left</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">none</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">            right</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Courier New&quot;;">1</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">px</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">            color</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">:</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Courier New&quot;;">#b6b6b6</span><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">        }</span></span></div><div><span style="font-size: 14px; background-color: rgb(250, 250, 250);"><span style="font-size: 14px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    }</span></span></div></div><div><br/></div><div><span style="font-family: &quot;Courier New&quot;; font-size: 18px; widows: 1;"><b>混合@mixin</b></span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    sass</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">中使用</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">@mixin</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">声明混合，可以传递参数，参数名以</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">@mixin</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">通过</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">@include</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">来调用。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    sass</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">中可用</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">mixin</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">css3</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">的前缀兼容轻松便捷。</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">无参数 </span><span style="background-color: rgb(251, 250, 248); font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">mixin</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-style: italic;">    @mixin </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">marginCenter{</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">margin-left:auto;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">margin-right:auto;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .cont{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include marginCenter;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">有参数 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">mixin</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    1</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">）必须传参数的应用</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-style: italic;">    @mixin </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">transform(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        -webkit-transform: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        -moz-transform: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        -ms-transform: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        -o-transform: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        transform: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$type</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .box{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include transform(scale(1.2))</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    2</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">）设置默认情况的</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">mixin（</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">当你不传入参数直接使用的话那会调用默认值）</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-style: italic;">    @mixin </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">opacity(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$opacity</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">:50){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        opacity: </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$opacity</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">/100;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        filter:alpha(opacity=</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$opacity</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">)</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .box{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include opacity()</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">多个参数 </span><span style="background-color: rgb(251, 250, 248); font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">mixin</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    调用时可直接传入值，如</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">@include</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">传入参数的个数小于</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">@mixin</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-style: italic;">    @mixin </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">line(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$border</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">:1px border #ccc, </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$padding</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">:10px){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        border-bottom:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$border</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        padding-top:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$padding</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        padding-bottom:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$padding</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .list ul{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include line(1px solid #ccc);</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .list p{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include line(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$padding</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">:15px);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">多组值参数</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">mixin</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    一个参数可以有多组值，如</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">box-shadow</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">、</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">transition</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">等，那么需要在参数后加三个点表示，如</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$shadow...</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-style: italic;">    @mixin </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">box-shadow(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$shadow</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">...) {</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        -webkit-box-shadow:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$shadow</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        box-shadow:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">$shadow</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    .box{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        border:1px solid #ccc;</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;;">    }</span></span></div></div><div style="margin: 0px; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;"><b>扩展/继承</b></span></span></div></div><div style="margin: 0px; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">sass</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">可通过</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">@extend</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">来实现代码组合声明，使代码更加优越简洁。</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .active{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        border:1px solid #b6b6b6;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        padding:10px;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        color: #333;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .success{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        @extend .active;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        width:100px;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div></div></div><div style="margin: 0px; text-align: start; text-indent: 0px; widows: 1;"><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"/><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;"><br/></span></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;"><b>运算</b></span></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-size: 12px; border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">sass</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">可进行简单的加减乘除运算等</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">当我们拿到一张需要转换成百分比或rem布局的设计稿，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">这时候我们有福了</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">    .container{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        width: 100%;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    //百分比</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .aside{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        width:(600px/960px)*100%;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    //rem</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .article{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        width:(300px/960px)*1rem;</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"/><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;"><br/></span></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;"><b>函数@function</b></span></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-size: 12px; border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">    sass</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">定义了很多函数可供使用，当然你也可以自己定义函数，以</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">@fuction</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">开始。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">    实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">lighten</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">减淡和</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">darken</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">加深为最，其调用方法为</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">lighten($color,$amount)</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">和</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">darken($color,$amount)</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">，它们的第一个参数都是颜色值，第二个参数都是百分比。</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$baseFontSize</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">:10px;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$gray</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">:#ccc;</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    @function pxToRem(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$px</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        @return (</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$px</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">/</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$baseFontSize</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">)</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">*1rem;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    body{</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        font-size:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$baseFontSize</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        color:lighten(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$gray</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">,10%);</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    .test{</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        font-size:pxToRem(16px);</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">        color:darken(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">$gray</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">,10%);</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    }</span></span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    这个和我们</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">JS</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">中的函数那非常的相似，可以和我们</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">js</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">中的函数一样使用。</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">    同时注意，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">这里的返回值几乎是必须的所以请在每个函数结束时，使用</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">@return</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(69, 69, 69); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">去返回需要的返回值。</span></div></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"/><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;"><br/></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; text-align: start; text-indent: 0px; widows: 1;"><div><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;"><b>导入</b></span></div></div><div style="margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><div style="box-sizing: border-box; padding: 8px; border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;;"><span>    </span>在sass中导入其他sass文件，最后编译为一个css文件</span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;;"><span>    </span></span></div><div style="margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><font face="Courier New"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; orphans: 2; text-indent: 0px; widows: 2; background-color: rgb(250, 250, 250);"><span>    </span>@import "</span><span style="orphans: 2; text-indent: 0px; widows: 2; background-color: rgb(250, 250, 250);">reset.scss"</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; orphans: 2; text-indent: 0px; widows: 2; background-color: rgb(250, 250, 250);">;</span></font></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background-color: rgb(251, 250, 248); font-variant-caps: normal; font-variant-ligatures: normal;"><font face="Courier New" style="font-size: 14px;"><br/></font></span></div><div><span style="background-color: rgb(251, 250, 248); font-variant-ligatures: normal;"><font face="Courier New">    被导入文件如无需单独编译，需要在文件名前加“_”，如："_public.scss"<br/></font></span></div></div><br/></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-align: start;"><br/></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; margin: 0px; orphans: 2; text-align: start; text-indent: 0px; widows: 2;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;">拓展部分：</span></div></div><div style="overflow: auto; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><div><br/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@if判断</span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@if可一个条件单独使用，也可以和@else结合多条件使用</span></div><div><br/></div><div style="background-color: rgb(250, 250, 250);"><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$lte7</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: true;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$type</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">monster</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">.</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">ib</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">display</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">:</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">inline-block</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@if </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$lte7 </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">*</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">display</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">:</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">inline</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">*</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">zoom</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">:</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">1</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">  }</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">}</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">p </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@if </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$type </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">== </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">ocean </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">color</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: blue;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">  } </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@else if </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$type </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">== </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">matador </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">color</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: red;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">  } </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@else if </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">$type </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">== </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">monster </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">color</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: green;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">  } </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@else </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">   </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">color</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: black;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">  }</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">}</span></div></div><div><br/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">三目判断</span></div><div><br/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">语法为：</span><span style="font-size: 16px; color: rgb(255, 38, 0); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">if($condition, $if_true, $if_false)</span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> 。三个参数分别表示：条件，条件为真的值，条件为假的值。</span></div><div><br/></div><div style="background-color: rgb(250, 250, 250);"><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">if</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">(</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">true</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">, </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">1</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">, </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">2</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">) =&gt; </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">1</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">if</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">(</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(47, 111, 159); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">false</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">, </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">1</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">, </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">2</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">) =&gt; </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">2</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">px</span></div></div></div><div><br/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">for循环***</span></div><div><br/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">for循环有两种形式，分别为：</span><span style="font-size: 16px; color: rgb(255, 38, 0); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@for $var from &lt;start&gt; through &lt;end&gt;</span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">和</span><span style="font-size: 16px; color: rgb(255, 38, 0); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">@for $var from &lt;start&gt; to &lt;end&gt;</span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。</span></div><div><br/></div><div style="background-color: rgb(250, 250, 250);"><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">.</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">item-1 </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">width</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">2</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">em;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">}</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">.</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">item-2 </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">width</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">4</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">em;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">}</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">.</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(0, 170, 136); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">item-3 </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">{</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;"> </span> <span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(79, 159, 207); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">width</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">: </span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(212, 73, 80); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">6</span><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">em;</span></div><div><span style="font-size: 16px; background-color: rgb(250, 250, 250); color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;; font-weight: bold;">}</span></div></div><div><br/></div><div><span style="font-size: 18px; color: rgb(51, 51, 51);"><br/></span></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-family: &quot;Courier New&quot;;">==========================================</span></font></div><div><br/></div><div><br/></div><div><font style="font-size: 24px;"><span style="font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;">一、什么是模块化</span></font></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">  </span> <span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;"> 是一种项目的构架模式， 这种构架模式让JS代码重用性变得非常高，让项目构架的一些复杂问题全部得以解决。 例如，多个script标签不会再出现了，我们只要用一个script标签进行引入就可以了。</span></div><div><br/></div><div><span style="caret-color: rgb(51, 51, 51);"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    为了减少系统耦合度，提高内聚，减少资源依赖</span></span></div><div><span style="caret-color: rgb(51, 51, 51);"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    便于维护，功能复用性更强</span></span></div><div><font style="font-size: 14px;"><span style="caret-color: rgb(51, 51, 51); font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;Courier New&quot;;">    解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题</span></font></div><div><br/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 24px;"><span style="font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;">二、模块化规范</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;"><font face="Courier New">模块化有三个规范，AMD规范和CMD规范，当然还有针对于ndoejs后台的commonJS规范</font></span></div><div><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;"><font face="Courier New">    </font></span></div><div><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;"><font face="Courier New">    AMD 异步模块定义=&gt;主要负责前端的模块化实现=&gt;require.js</font></span></div><div><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;"><font face="Courier New">        依赖前置 =&gt; 如果你有，我就加载</font></span></div><div><br style="font-size: 12px; color: rgb(51, 51, 51);"/></div><div><font face="Courier New"><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;">    CMD 需求加载，</span><span style="color: rgb(214, 214, 214); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;">创始人是玉伯，=&gt; seajs</span></font></div><div><br style="font-size: 12px; color: rgb(51, 51, 51);"/></div><div><span style="color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal; font-size: 14px;"><font face="Courier New">    CommonJs =&gt; NodeJs规范 =&gt; 用来写后台的</font></span></div><div style="font-size: 12px;"><font face="Courier New"><span style="font-size: 14px; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; color: rgb(51, 51, 51);">这些规范目标一致都是为项目实现模块化，期中有遵循AMD规范的 require.js 和遵循CMD规范的sea.js。</span></font></div><div style="font-size: 12px;"><span style="font-size: 14px; color: rgb(51, 51, 51);"><font face="Courier New">    </font></span></div><div style="font-size: 12px;"><font face="Courier New"><span style="font-size: 14px; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; color: rgb(51, 51, 51);">先说这两种规范的不同：</span></font></div><div style="font-size: 12px;"><span style="font-size: 14px; color: rgb(51, 51, 51);"><font face="Courier New">    1.首先对于依赖：</font></span></div><div style="font-size: 12px;"><font face="Courier New"><span style="font-size: 14px; color: rgb(51, 51, 51);">        AMD提前执行(不管有没有用，先加载过来)</span><span style="font-size: 14px; color: rgb(51, 51, 51);">  </span> <span style="font-size: 14px; color: rgb(51, 51, 51);">//特点 : 前期消耗网络资源大， 但是后期运行效率高.</span></font></div><div style="font-size: 12px;"><font face="Courier New"><span style="font-size: 14px; color: rgb(51, 51, 51);">        CMD需求执行(有用我再去加载)</span><span style="font-size: 14px; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; color: rgb(51, 51, 51);">    </span><span style="font-size: 14px; color: rgb(51, 51, 51);">  </span> <span style="font-size: 14px; color: rgb(51, 51, 51);">//特点:整个自选消耗曲线比较平缓。</span></font></div><div style="font-size: 12px;"><font face="Courier New"><span style="font-size: 14px; color: rgb(51, 51, 51);">    2. CMD 推崇</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-weight: bold;">依赖就近</span><span style="font-size: 14px; color: rgb(51, 51, 51);">，AMD 推崇</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-weight: bold;">依赖前置</span><span style="font-size: 14px; color: rgb(51, 51, 51);">。</span></font></div><div style="font-size: 12px;"><div><br style="font-size: 12px; color: rgb(51, 51, 51);"/></div></div><div><font style="font-family: &quot;Courier New&quot;;"><span style="font-size: 14px; color: rgb(51, 51, 51);">    3. AMD 的 API 默认是</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-weight: bold;">一个当多个用</span><span style="font-size: 14px; color: rgb(51, 51, 51);">。比如，require 分全局 require 和局部 require，都叫 require。</span></font></div><div><br/></div><div><a href="http://www.ruanyifeng.com/blog/2012/11/require_js.html?bsh_bid=230697246" style="font-size: 12px; color: rgb(51, 51, 51);"><font face="Courier New">http://www.ruanyifeng.com/blog/2012/11/require_js.html?bsh_bid=230697246</font></a></div></div><div><br/></div><div><span style="font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;">三、AMD模块化</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">    </span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">    定义模块defined()：(module.js)</span></div><div><span style="font-variant-ligatures: normal;orphans: 2;text-indent: 0px;widows: 2;-en-paragraph:true;"><font face="Courier New" size="3">        defined(["otherModule"],function(){</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">            ...</span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">            <span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">...</span></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">            return {};</span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">        })</span></div><div><br/></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">    加载模块require()：(main.js)</span></div><div><span style="font-variant-ligatures: normal;orphans: 2;text-indent: 0px;widows: 2;-en-paragraph:true;"><font face="Courier New" size="3">        require(["module"],function(moduleObj){</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">            //模块加载完成后执行</span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">            ...</span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">        })</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 24px;"><span style="font-size: 24px; font-family: &quot;Courier New&quot;; font-weight: bold;">四、ES6模块化</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">    ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。</font></span></div><div><br/></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">    ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">    </font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">    ES6模块的使用：</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">    使用export规定模块的对外接口，使用import用于输入其他模块提供的功能</font></span></div><div><font face="Courier New" style="font-size: 14px;">         </font></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font style="font-size: 14px; font-family: &quot;Courier New&quot;;">    <span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-family: Courier New;font-size: 14px;-en-paragraph:true;">定义模块</span>export语法：（</font></span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2;">module.js文件）</span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        export var a = 10;</font></span></div><div><span style="font-variant-ligatures: normal;orphans: 2;text-indent: 0px;widows: 2;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        </font></span></div><div><span style="font-variant-ligatures: normal;orphans: 2;text-indent: 0px;widows: 2;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        var b = 20;</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        export {b};</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        </font></span></div><div><span style="font-variant-ligatures: normal;orphans: 2;text-indent: 0px;widows: 2;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        var c = "admin"</font></span></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;-en-paragraph:true;"><font face="Courier New" style="font-size: 14px;">        export {c as name};</font></span></div><div><br/></div><div><font face="Courier New"><span style="font-size: 14px;">        ||</span></font></div><div><br/></div><div><font face="Courier New"><font size="3">        export {a,b,c};</font></font></div><div><font face="Courier New"><font size="3">        export {a as num1, b as num2, c as name};</font></font></div><div><font face="Courier New"><font size="3">        export default {num1:a, num2:b, name:c}</font></font></div><div><br/></div><div><span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">    <span style="color: rgb(51, 51, 51);font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;font-size: 14px;font-family: &quot;Courier New&quot;;-en-paragraph:true;">加载模块</span>import语法：（</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(51, 51, 51);">main.js文件）</span></div><div><span style="orphans: 2; widows: 2;"><font style="font-family: &quot;Courier New&quot;; font-size: 14px;">        import {a} from <span style="orphans: 2; widows: 2; font-family: Courier New; color: rgb(51, 51, 51);">"./module.js";</span></font></span></div><div><span style="orphans: 2; widows: 2;"><font><font face="Courier New" size="3">        </font><span style="font-family: &quot;Courier New&quot;; font-size: 14px; color: rgb(51, 51, 51);">import {b} from </span><span style="orphans: 2; widows: 2;"><font face="Courier New" size="3">"./module.js";</font></span></font></span></div><div><span style="orphans: 2; widows: 2;"><font><font face="Courier New" size="3">        </font><span style="font-family: &quot;Courier New&quot;; font-size: 14px; color: rgb(51, 51, 51);">import {c} from </span><span style="orphans: 2; widows: 2;"><font face="Courier New" size="3">"./module.js";</font></span></font></span></div><div><span style="orphans: 2; widows: 2;"><font style="font-family: &quot;Courier New&quot;; font-size: 14px;">        import {a,b,c} from "./module.js";</font></span></div><div><span style="orphans: 2; widows: 2;"><font><font size="3" style="font-family: &quot;Courier New&quot;;">        </font><span style="font-family: &quot;Courier New&quot;; font-size: 14px; color: rgb(51, 51, 51);">import {num1,num2,num3} from </span><span style="orphans: 2; widows: 2;"><font face="Courier New"><font size="3">"./module.js”;</font></font></span></font></span></div><div><span style="orphans: 2; widows: 2;"><font><span style="orphans: 2; widows: 2;"><font face="Courier New"><font size="3">        ||</font></font></span></font></span></div><div><span style="orphans: 2; widows: 2;"><font><span style="orphans: 2; widows: 2;"><font style="font-family: &quot;Courier New&quot;;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(51, 51, 51);">        import {num1 as n1, num2 as n2, num3 as n3} from </span><span style="orphans: 2; widows: 2;"><font size="3">"./module.js";</font></span></font></span></font></span></div><div><span style="orphans: 2; widows: 2;"><font><span style="orphans: 2; widows: 2;"><font face="Courier New"><span style="orphans: 2; widows: 2;"><font size="3">        import obj from<span style="font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(51, 51, 51);"> </span><span style="orphans: 2; widows: 2; font-size: 14px; font-family: Courier New; color: rgb(51, 51, 51);">"./module.js";</span></font></span></font></span></font></span></div><div><br/></div><div><br/></div><div><span style="font-size: 14px;font-family: &quot;Courier New&quot;;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;color: rgb(51, 51, 51);-en-paragraph:true;">    </span><span style="font-size: 14px;font-family: &quot;Courier New&quot;;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-indent: 0px;text-transform: none;white-space: normal;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;color: rgb(255, 38, 0);-en-paragraph:true;">注意：1.</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);">export和import关键字，只能存在于顶层作用域内，不能存在局部或块级作用域</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);">    </span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);">     2.在ES6的模块化中，所有语法自动处在严格模式下</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);">    </span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);">    </span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; orphans: 2; widows: 2; color: rgb(255, 38, 0);"> 3.export是声明关键字，声明一个对外接口</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">    </span><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">     4.export声明的接口必须和模块内部的变量建立一一对应的关系</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         5.export声明的接口与对应的值是动态绑定，即可以拿到模块内部实时修改的值</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">    </span><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">     5.export和import时，都可以使用as关键字，重命名接口</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">    </span><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">     6.使用default关键字，设置默认接口，一个模块中只允许出现一次default</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">    </span><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">     7.import在使用接口时，必须将接口放在花括号内，除非export暴露接口时使用了default关键字</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         8.import加载的接口是只读的，不允许被修改，如果接口是对象，可以修改属性</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         9.import具有提升效果</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         10.由于import是静态执行，所以不能使用表达式和变量</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         11.当import后没有接收接口，会执行整个模块文件</span></div><div><span style="color: rgb(255, 38, 0); orphans: 2; widows: 2; font-size: 14px; font-family: &quot;Courier New&quot;;">         12.可以使用通配符*加载整个模块的接口（需要配合as使用），返回一个模块对象</span></div><div><span style="font-size: medium; font-family: &quot;Courier New&quot;;"><span style="color: rgb(0, 0, 0);">         </span><font color="#FF2600">13.ES6的模块化不是对象，而是通过ex</font></span><span style="color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-size: medium;">port输出对应的代码，再通过import输入</span></div><div><font face="Courier New"><font color="#FF2600" size="3">         14.import加载模块的输入接口是静态加载，指定接口的情况下，只加载接口部分</font></font></div><div><br/></div></div><div><br/></div><div><br/></div><div style="font-size: 12px;"><span style="font-size: 12px;"><a href="DAY34%EF%BC%9ASass%E5%92%8C%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.resources/require.zip">require.zip</a></span></div></body></html>